<!--
 @description 收货地址编辑/新增
 @fileName Item.vue
 @author zengqiongying
 @created 2023/04/28 14:36:41
-->
<template>
  <div>
    <Cell
      v-if="!hideName"
      v-model="formData.name"
      title="收货地址名称"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      required
      inputAlign="right"
    />
    <FieldArea title="所在省市区" v-model="areaData" :option="areaOption" fieldKey="id" required />

    <Cell
      v-model="formData.address"
      title="详细地址"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      required
      inputAlign="right"
    />
    <Cell title="第一联系人" placeholder="无" custom required @right="onClickEditPerson('first')">
      {{ formData.firstReceiver }} {{ formData.firstReceiverTel }} {{ formData.firstReceiverPhone }}
    </Cell>
    <Cell title="第二联系人" placeholder="无" custom @right="onClickEditPerson('second')">
      {{ formData.secondReceiver }} {{ formData.secondReceiverTel }} {{ formData.secondReceiverPhone }}
    </Cell>
    <div v-if="showPersonEdit">
      <EditPerson
        :title="`编辑${personType === 'first' ? '第一' : '第二'}联系人`"
        v-model="personData"
        v-model:show="showPersonEdit"
        :required="personType === 'first'"
        @success="onPersonChange"
      />
    </div>
  </div>
</template>

<script>
  import { reactive, toRefs, defineComponent, watch, nextTick } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldArea from '@/components/FieldArea/index.vue'
  import EditPerson from './EditPerson.vue'
  import { initFormData } from '@/utils'
  export default defineComponent({
    name: 'DealerReciveAddressItem',
    components: { Cell, FieldArea, EditPerson },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      },
      hideName: {
        type: Boolean,
        default: false
      }
    },
    setup(props, { emit }) {
      const datas = reactive({
        areaData: {
          provinceCode: '',
          provinceName: '',
          province: '',
          cityCode: '',
          cityName: '',
          city: '',
          countyCode: '',
          countyName: '',
          county: '',
          townCode: '',
          townName: '',
          town: ''
        },
        areaOption: {
          provinceId: 'province',
          province: 'provinceName',
          provinceCode: 'provinceCode',
          cityId: 'city',
          city: 'cityName',
          cityCode: 'cityCode',
          districtId: 'county',
          district: 'countyName',
          districtCode: 'countyCode',
          townId: 'town',
          town: 'townName',
          townCode: 'townCode'
        },
        formData: {
          name: '',
          address: '',
          firstReceiver: '',
          firstReceiverTel: '',
          firstReceiverPhone: '',
          secondReceiver: '',
          secondReceiverTel: '',
          secondReceiverPhone: ''
        },
        showPersonEdit: false,
        personType: '',
        personData: {
          name: '',
          tel: '',
          phone: ''
        }
      })
      watch(
        () => props.modelValue,
        (d) => {
          initFormData(d, datas.areaData)
          initFormData(d, datas.formData)
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.areaData,
        (d) => {
          datas.formData = { ...datas.formData, ...d }
        },
        {
          deep: true,
          immediate: true
        }
      )

      watch(
        () => datas.formData,
        (d) => {
          emit('update:modelValue', { ...props.modelValue, ...d })
        },
        {
          deep: true,
          immediate: true
        }
      )
      const onClickEditPerson = (type) => {
        const d = datas.formData
        datas.personType = type
        if (type === 'first') {
          datas.personData = {
            name: d.firstReceiver,
            tel: d.firstReceiverTel,
            phone: d.firstReceiverPhone
          }
        } else {
          datas.personData = {
            name: d.secondReceiver,
            tel: d.secondReceiverTel,
            phone: d.secondReceiverPhone
          }
        }
        nextTick(() => {
          datas.showPersonEdit = true
        })
      }
      const onPersonChange = (d) => {
        let data = {}
        if (datas.personType === 'first') {
          data = {
            firstReceiver: d?.name || '',
            firstReceiverTel: d?.tel || '',
            firstReceiverPhone: d?.phone || ''
          }
        } else {
          data = {
            secondReceiver: d?.name || '',
            secondReceiverTel: d?.tel || '',
            secondReceiverPhone: d?.phone || ''
          }
        }
        datas.formData = { ...datas.formData, ...data }
        nextTick(() => {
          datas.personType = ''
          datas.personData = {
            name: '',
            tel: '',
            phone: ''
          }
        })
      }

      return {
        ...toRefs(datas),
        onPersonChange,
        onClickEditPerson
      }
    }
  })
</script>
<style lang="less" scoped></style>
